<style media="screen">
  .contract-detail-container .table .content-item>div {
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 40px;
  }

  .contract-detail-container .table .content-item>div div {
    height: auto;
    line-height: 32px;
  }

  .aboutTemplate {
    margin-top: 30px;
    position: relative;
  }

  .templateList {
    width: 780px;
    background: #fff;
    box-shadow: 0px 0px 6px 0px rgba(136, 136, 136, 0.75);
    border-radius: 6px;
  }

  .templateList_title {
    height: 46px;
    text-align: center;
    line-height: 46px;
  }

  .templateList_content {
    background: #F9F9F9;
    padding: 24px 0px 77px 16px;
  }

  .TC_header {
    color: #666;
    font-size: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid #E8E8E8;
    padding-right: 20px;
    margin-bottom: 18px;
  }

  .TC_header>div {
    display: flex;
    justify-content: space-between;
    align-items: center
  }

  .TC_header>ul {
    display: flex;
    align-items: center;
  }

  .TC_header>ul>li {
    display: flex;
    align-items: center;
    margin-right: 50px;
  }

  .TC_mask {
    display: none;
    position: absolute;
    z-index: 9;
    width: 140px;
    height: 36px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    /* text-align: center; */
    text-indent: 47px;
    line-height: 36px;
    color: #fff;
    cursor: pointer;
  }

  .check-auth {
    display: inline-block;
    width: 13px;
    height: 13px;
    position: relative;
    border: 1px solid #666;
    border-radius: 4px;
    margin-right: 10px;
  }

  .check-auth-active {
    display: inline-block;
    background-image: url(assets/images/Check.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 8px;
    background-color: #44B548;
    width: 13px;
    height: 13px;
    border: 1px solid #44B548;
    border-radius: 4px;
    margin-right: 10px;
  }

  .check-item {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    z-index: 99;
    background: #fff;
    border-radius: 8px;
    right: 10px;
    top: 9px;
  }

  .check-item-active {
    display: inline-block;
    background-image: url(assets/images/Check.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 8px;
    background-color: #5e67a5;
    width: 13px;
    height: 13px;
    border: 1px solid #5e67a5;
    border-radius: 4px;
    margin-right: 10px;
  }

  .tem-item {
    width: 140px;
    height: 36px;
    background: #44B548;
    box-shadow: 1px 1px 2px 0px rgba(163, 184, 198, 0.5);
    border-radius: 4px;
    margin: 0 10px 10px 0;
    overflow: hidden;
    position: relative;
    line-height: 36px;
    text-indent: 10px;
    color: #fff;
    padding-right: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .tem-item:hover .TC_mask {
    display: block
  }

  .tem-item:hover .TC_text {
    -webkit-filter: blur(3px);
  }

  .tem-item-box {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
  }

  .TC_selected_active {
    color: #44B548
  }

  .TC_selected_icon {
    position: absolute;
    z-index: 9999;
    right: 12px;
    top: 12px;
    font-size: 12px;
  }

  .templateList_footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 56px;
  }

  .TC_close_icon {
    float: right;
    margin: 15px 20px 0 0;
  }

  .loadprogress {
    position: fixed;
    z-index: 999999;
    left: 0;
    bottom: 0;
    height: 20px;
    width: 500px;
    font-size: 12px;
    text-indent: 3px;
    line-height: 20px;
  }

  textarea {
    width: 580px;
    height: 120px;
    padding: 6px 12px;
    font-size: 14px;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  }

  .pop.contract-confirm-layer .content-pop .content {
    text-align: center
  }

  .table-income td,
  .table-income th {
    padding: 0 8px !important;
    font-weight: 400;
    white-space: nowrap
  }

  .scal-font {
    transform: scale(0.8);
    display: inline-block;
    text-decoration: line-through;
    font-size: 12px;
    color: #999;
  }

  .scal-font1 {
    display: inline-block;
    text-decoration: line-through;
    color: #999;
  }

  .ZDY_item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
  }

  .ZDY_title {
    font-size: 14px;
    color: #999;
  }

  .ZDY_content {
    flex: 1;
    padding-right: 10px;
  }

  .reletbox {
    height: 40px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    font-size: 14px;
    background: rgba(233, 134, 103, 0.23);
    border-radius: 4px;
    margin-bottom: 15px;
  }

  .reletbox div {
    width: 20px;
    line-height: 18px;
    text-align: center;
    border: 1px solid #e98667;
    border-radius: 2px;
    color: #E98667;
    margin-right: 10px;
  }

  .reletbox span {
    color: #999;
  }

  .contract-detail-container h3.title {
    width: auto;
  }
</style>

<section>
  <div id="contract-detail" class="pb-10">
    <page-tab :data="tabData" prefix="整租合同" @on-item-click="handleSelectedTab"></page-tab>
    <div class="js-content-scrollno plr-24">
      <div class="contract-content">
        <!-- 合同详情 -->
        <section class="contract-detail-container" v-show="loadContractMesModule">
          <div class="js-failMemo" v-if="contract.failMemo && contract.auditState == 'RJ'">{{contract.failMemo}}</div>
          <!-- 基本信息 -->
          <div class="border-b pb-10">
            <h3 class="title">主要信息</h3>

            <div class="reletbox" v-if="contract.renewFlag == 'N' && contract.renewContracts.length">
              <div>续</div>
              <span>续租合同管理编号：</span>
              <a target="_blank" :href="'#/contractNewDeatil?id='+item.id+'&ddtab=true&relet=true'"
                v-for="(item, index) in contract.renewContracts">{{item.mCode}}
                <span v-if="index < contract.renewContracts.length-1">,</span>
              </a>
            </div>

            <div class="reletbox" v-if="contract.renewFlag == 'Y'">
              <div>续</div>
              <span>原合同管理编号：</span>
              <a target="_blank"
                :href="'#/contractNewDeatil?id='+contract.originalContract.id+'&ddtab=true&relet=true'">{{contract.originalContract.mCode}}</a>
            </div>

            <!-- <div style="background: #eeeeee;border-radius: 4px;padding: 15px;"  v-if="contract.renewFlag == 'N' && contract.renewContracts.length">
              <span class="color-666">续租合同管理编号：</span>
              <a target="_blank" :href="'#/contractNewDeatil?id='+item.id+'&ddtab=true&relet=true'"  v-for="(item, index) in contract.renewContracts">{{item.mCode}}
                <span v-if="index < contract.renewContracts.length-1">,</span>
              </a>
            </div> -->
            <!-- <div style="background: #eeeeee;border-radius: 4px;padding: 15px;" v-if="contract.renewFlag == 'Y'">
              <span class="color-666">原合同管理编号：</span>
              <a target="_blank" :href="'#/contractNewDeatil?id='+contract.originalContract.id+'&ddtab=true&relet=true'">{{contract.originalContract.mCode}}</a>
            </div> -->

            <div class="row">
              <div class="col-md-2 title">合同编号：</div>
              <div class="col-md-2 item htbh" style="width:200px;">{{contract.cCode | formatUndefined}}</div>
              <div class="col-md-2 title">管理编号：</div>
              <div class="col-md-2 item">{{contract.mCode}}</div>
              <div class="col-md-2 title">合同名称：</div>
              <div class="col-md-2 item">
                <el-tooltip class="item" effect="light" placement="bottom">
                  <div slot="content">{{contract.name | formatUndefined}}</div>
                  <div class="ellipsis-1">{{contract.name | formatUndefined}}</div>
                </el-tooltip>

              </div>
              <div class="col-md-2 title">合同状态：</div>
              <div class="col-md-1 item">{{contract.auditState | formatContractAuditState}}</div>
            </div>
            <div class="row">
              <div class="col-md-2 title">租赁期限：</div>
              <div class="col-md-2 item zlqx" style="width:200px;">{{contract.beginDate | formatDate}} 到
                {{contract.endDate | formatDate}}</div>
              <div class="col-md-2 title">签订日期：</div>
              <div class="col-md-2 item">{{contract.signTime | formatDate}}</div>
              <div class="col-md-2 title">合同类型：</div>
              <div class="col-md-1 item" style="width: 165px;">{{contract.contractType | formatContractType}}</div>
              <div class="col-md-2 title">经办人：</div>
              <div class="col-md-1 item">{{contract.operatorName | formatUndefined}}</div>
            </div>
            <div class="row">
              <div class="col-md-2 title" style="width: 107px;">首期付款日：</div>
              <div class="col-md-2 item zlqx" style="width:182px;">{{contract.firstPaymentDate | formatDate}}</div>
              <div class="col-md-2 title" style="width: 107px;">后续付款日：</div>
              <div class="col-md-2 item" style="width: 146px;">
                {{contract.billDateBOA ? (contract.billDateBOA == 'B' ? '账单开始前' : '账单开始后') : '账单开始前'}}{{contract.billDateFixNum | formatUndefined}}{{contract.billDateFixType ? (contract.billDateFixType == 'TS' ? '个自然日' : '号') : '个自然日'}}
              </div>
              <div class="col-md-2 title">合同版本：</div>
              <div class="col-md-2 item zlqx" style="width:164px;">{{contract.version}}</div>
              <div class="col-md-2 title" v-if="contract.relatedIntentCode">关联意向：</div>
              <div class="col-md-1 item ellipsis-1" v-if="contract.relatedIntentCode"
                :title="contract.relatedIntentCode">{{contract.relatedIntentCode}}</div>
            </div>
            <div class="row">
              <div class="col-md-2 title">创建日：</div>
              <div class="col-md-2 item" style="width:200px;">{{contract.createTime | formatDate}} </div>
              <div class="col-md-2 title" style="width:107px;">审批通过日：</div>
              <div class="col-md-2 item" style="width:150px;">{{contract.passDate | formatDate}}</div>
              <div class="col-md-2 title">退租时间：</div>
              <div class="col-md-1 item">{{contract.withdrawDate | formatDate}}</div>
            </div>
            <div class="row">
              <div class="col-md-2 title" style="width: 153px; ">最近一次变更时间：</div>
              <div class="col-md-1 item">{{contract.alterDate | formatDate}}</div>
            </div>
            <div class="row">
              <div class="col-md-2 title">备注：</div>
              <div class="col-md-10 item zlqx">{{contract.memo | formatUndefined}}</div>
            </div>
          </div>
          <!-- 终止原因 -->
          <div class="border-b pb-10" v-if="contract.terminateUserName">
            <h3 class="title">终止信息</h3>
            <div class="row">
              <div class="col-md-2 title">终止人：</div>
              <div class="col-md-2 item htbh" style="width:200px;">{{contract.terminateUserName}}</div>
              <div class="col-md-2 title">终止原因：</div>
              <div class="col-md-2 item">{{contract.terminationReasonCodeVal}}</div>
            </div>
            <div class="row">
              <div class="col-md-2 title">终止说明：</div>
              <div class="col-md-9 item">{{contract.terminationDesc || '--'}}</div>
            </div>
          </div>
          <!-- 乙方 -->
          <div class="border-b pb-10 hl-global-detail-box">
            <h3 class="title">乙方</h3>
            <div class="hl-row">
              <div class="hl-row-item" style="width: 100%;">
                <div class="title">客户名称：</div>
                <div class="item">{{contract.zlfCompany}}</div>
              </div>
            </div>
            <div class="hl-row">
              <div class="hl-row-item">
                <div class="title">客户类型：</div>
                <div class="item">{{contract.zlfType | formatZlfType}}</div>
              </div>
              <div class="hl-row-item">
                <div class="title">所属行业：</div>
                <div class="item">{{ityName || '--'}}</div>
              </div>
            </div>
            <div class="hl-row" v-if="contract.zlfType === 'C'">
              <div class="hl-row-item">
                <div class="title">{{contract.zlfType == 'C' ? '纳税人识别号' : '身份证'}}：</div>
                <div class="item">{{contract.idcode | formatUndefined}}</div>
              </div>
              <div class="hl-row-item">
                <div class="title">公司邮箱：</div>
                <div class="item">{{contract.email | formatUndefined}}</div>
              </div>
            </div>
            <div class="hl-row" v-if="contract.zlfType === 'P'">
              <div class="hl-row-item">
                <div class="title" :style="{width: contract.zlfType == 'C' ? '120px' : 'auto'}">身份证号：</div>
                <div class="item">{{contract.idcode | formatUndefined}}</div>
              </div>
              <div class="hl-row-item">
                <div class="title">个人邮箱：</div>
                <div class="item">{{contract.email | formatUndefined}}</div>
              </div>
            </div>
            <div class="hl-row">
              <div class="hl-row-item">
                <div class="title">法人：</div>
                <div class="item">{{contract.zlfLperson | formatUndefined}}</div>
              </div>
              <div class="hl-row-item">
                <div class="title">联系电话：</div>
                <div class="item">{{contract.zlfLphone | formatUndefined}}</div>
              </div>
            </div>
            <div class="hl-row">
              <div class="hl-row-item">
                <div class="title qdr">联系人：</div>
                <div class="item qdr">{{contract.zlfSperson}}</div>
              </div>
              <div class="hl-row-item">
                <div class="title">联系电话：</div>
                <div class="item">{{contract.zlfSphone}}</div>
              </div>
            </div>
            <div class="hl-row">
              <div class="hl-row-item" style="width: 100%;">
                <div class="title">联系地址：</div>
                <div class="item">{{contract.zlfAddress || '--'}}</div>
              </div>
            </div>
            <div class="hl-row">
              <div class="hl-row-item">
                <div class="title qdr">渠道分类：</div>
                <div class="item qdr">{{contract.channelCategoryVal || '--'}}</div>
              </div>
              <div class="hl-row-item">
                <div class="title">渠道名称：</div>
                <div class="item">{{contract.channelNameVal || '--'}}</div>
              </div>
            </div>

          </div>
          <!-- 自定义字段 -->
          <!-- 自定义 -->
          <div class="mt-15">
            <hl-custom-fileds type="CONTRACT" mode="detail" :data="tmpData"></hl-custom-fileds>
          </div>
          <!-- 出租资源 -->
          <div>
            <h3 class="title">出租资源</h3>
            <!-- 单元 -->
            <div v-if="building.length">
              <div class="hl-34 mr-10">单元({{totalArea | formatNum}}m²)</div>
              <div class="unit-table">
                <div class="tb-title dy-flex border-b gradient-color">
                  <div class="dy-fx-2">项目</div>
                  <div class="dy-fx-2">楼栋</div>
                  <div class="dy-fx-1">楼层</div>
                  <div class="dy-fx-4">单元</div>
                </div>
                <div class="tb-content">
                  <ul class="dy-flex project-cr">
                    <li class="dy-fx-2 project">{{contract.projectName}}</li>
                    <li class="dy-fx-7">
                      <!-- 楼栋 -->
                      <ul class="dy-flex building-cr" v-for="(item,index) in building">
                        <li class="dy-fx-2 building">{{item.buildingName}}</li>
                        <li class="dy-fx-5">
                          <!-- 楼层 -->
                          <ul class="dy-flex floor-cr" v-for="(item1,index1) in item.floor">
                            <li class="dy-fx-1 floor">{{item1.floorName || '--'}}</li>
                            <li class="dy-fx-4 unit">
                              <!-- 单元 -->
                              <b v-for="(item2,index2) in item1.unit" @click="getUnitDetails(item1.unitId[index2])"><a
                                  href="javascript:;">{{item2}}</a><i v-if="index2 + 1 !== item1.unit.length">、</i></b>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <!-- 工位 -->
            <div v-if="wp.length">
              <div class="hl-34 mr-10 color-333" v-if="wp.length">工位({{wpTotalNum}}个)</div>
              <div class="position-table border" v-if="wp.length">
                <div class="tb-title dy-flex border-b gradient-color">
                  <div class="dy-fx-3">项目</div>
                  <div class="dy-fx-3">楼栋</div>
                  <div class="dy-fx-1">楼层</div>
                  <div class="dy-fx-1">单元</div>
                  <div class="dy-fx-1">工位数</div>
                  <div class="position-item">工位</div>
                </div>
                <ul class="tb-content">
                  <li class="content-item dy-flex" v-for="(item,index) in wp" :buildingId="item.buildingId"
                    :floorId="item.floorId" :unitId="item.unitId">
                    <div class="dy-fx-3">{{contract.projectName}}</div>
                    <div class="dy-fx-3">{{item.buildingName}}</div>
                    <div class="dy-fx-1">{{item.floorName || '--'}}</div>
                    <div class="dy-fx-1">{{item.unitName}}</div>
                    <div class="dy-fx-1">{{item.num}}</div>
                    <div class="position-item">
                      <span class="position">
                        <b v-for="(item1,index1) in item.positions">{{item1.positionName}}<i
                            v-if="index1 + 1 !== item.positions.length">、</i></b>
                      </span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <!-- 车位 -->
            <div v-if="st.length">
              <div class="hl-34 mr-10 color-333" v-if="st.length">车位({{stTotalNum}}个)</div>
              <div class="position-table border" v-if="st.length">
                <div class="tb-title dy-flex border-b gradient-color">
                  <div class="dy-fx-3">项目</div>
                  <div class="dy-fx-3">楼栋</div>
                  <div class="dy-fx-1">楼层</div>
                  <div class="dy-fx-1">单元</div>
                  <div class="dy-fx-1">车位数</div>
                  <div class="position-item">车位</div>
                </div>
                <ul class="tb-content">
                  <li class="content-item dy-flex" v-for="(item,index) in st" :buildingId="item.buildingId"
                    :floorId="item.floorId" :unitId="item.unitId">
                    <div class="dy-fx-3">{{contract.projectName}}</div>
                    <div class="dy-fx-3">{{item.buildingName}}</div>
                    <div class="dy-fx-1">{{item.floorName || '--'}}</div>
                    <div class="dy-fx-1">{{item.unitName}}</div>
                    <div class="dy-fx-1">{{item.num}}</div>
                    <div class="position-item">
                      <span class="position">
                        <b v-for="(item1,index1) in item.positions">{{item1.positionName}}<i
                            v-if="index1 + 1 !== item.positions.length">、</i></b>
                      </span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- 固定租金 -->
          <div class="pb-10 border-b" v-if="isGDZJflag"
            v-show="!(building.length == 0 && wp.length == 0 && st.length !== 0)">
            <h3 class="title">固定租金</h3>
            <div class="row">
              <div class="col-md-2 title">租金单价：</div>
              <div class="col-md-2 item" v-if="rentPriceUnit === 'DM'">{{contract.rentPrice | formatNum}}元/m²/天</div>
              <div class="col-md-2 item" v-if="rentPriceUnit === 'MM'">{{contract.rentPrice | formatNum}}元/m²/月</div>
              <div class="col-md-2 item" v-if="rentPriceUnit === 'DG'">{{contract.rentPrice | formatNum}}元/个/天</div>
              <div class="col-md-2 item" v-if="rentPriceUnit === 'MG'">{{contract.rentPrice | formatNum}}元/个/月</div>

              <div class="col-md-2 title" style="width:100px;">日租金：</div>
              <div class="col-md-2 item">{{contract.rentPriceDay | formatNum}}元/天</div>
              <div class="col-md-2 title" style="width:100px;">月租金：</div>
              <div class="col-md-2 item">{{contract.rentPriceMonth | formatNum}}元/月</div>
            </div>
            <div class="row">
              <div class="col-md-2 title">有效租金：</div>
              <div class="col-md-2 item">{{contract.effectiveRentDay | formatNum}}元/m²/天</div>
            </div>
            <div class="row" v-if="contract.intermediaryCommission != '0'">
              <div class="col-md-2 title">中介佣金：</div>
              <div class="col-md-2 item">
                <span>按月租金{{contract.intermediaryCommissionPercent*100}}%
                  &nbsp;{{contract.intermediaryCommission | formatNum}}元</span>
              </div>
            </div>
            <div class="row">
              <div class="col-md-2 title">押付方式：</div>
              <div class="col-md-2 item">
                <span>押{{contract.depositPeriod}} 付{{contract.paymentPeriod}}</span>
              </div>
              <div class="col-md-1 title" style="width:130px;">租金滞纳金比例：</div>
              <div class="col-md-1 item">{{contract.rentLateFeePercent? contract.rentLateFeePercent + '%' : '--'}}</div>
            </div>
            <!-- 折扣月租金 -->
            <div class="row" v-if="contract.rentDiscountRate">
              <div class="col-md-3 title">折扣率：</div>
              <div class="col-md-2 item">{{contract.rentDiscountRate*100 | formatNum}}%</div>
              <div class="col-md-3 title" style="width:100px;">折后日租金：</div>
              <div class="col-md-2 item">{{contract.rentDiscountPriceDay | formatNum}}元/天</div>
              <div class="col-md-3 title" style="width:100px;">折后月租金：</div>
              <div class="col-md-2 item">{{contract.rentDiscountPriceMonth | formatNum}}元/月</div>
            </div>

          </div>





          <!-- 租金押金 -->
          <div class="pb-10" v-if="isYJflag" v-show="!(building.length == 0 && wp.length == 0 && st.length !== 0)">
            <h3 class="title">押金</h3>
            <div class="row">
              <div class="col-md-2 title" style="width: 100px">押金总金额：</div>
              <div class="col-md-2 item" style="margin-right:30px">{{yaTotal}}元</div>
            </div>
            <div class="table border mt-10">
              <div class="tb-title dy-flex border-b gradient-color">
                <div class="dy-fx-1">费用名</div>
                <div class="dy-fx-1">单价</div>
                <div class="dy-fx-1">押几{{contract.rentWay == 'D'?'天':'月'}}</div>
                <div class="dy-fx-1">总金额</div>
                <div class="dy-fx-1">滞纳金比例</div>
              </div>
              <ul class="tb-content border-b">
                <li class="content-item dy-flex" v-for="(item,index) in contract.expenses"
                  v-if="item.expenseType == 'D' && (item.depositType == 'DR' || !item.depositType)">
                  <div class="dy-fx-1">租金押金</div>
                  <div class="dy-fx-1">--</div>
                  <div class="dy-fx-1">{{item.expensePeriod || '--'}}</div>
                  <div class="dy-fx-1">{{item.amount | formatNum}}</div>
                  <div class="dy-fx-1">{{Number(item.lateFee * 100).toFixed(2)}}%</div>
                </li>
              </ul>
              <ul class="tb-content">
                <li class="content-item dy-flex" v-for="(item,index) in contract.expenses"
                  v-if="item.expenseType == 'D' && item.depositType == 'DO'">
                  <div class="dy-fx-1">{{item.expenseName}}</div>
                  <div class="dy-fx-1">{{item.price | formatNum}}（元/平米/月）</div>
                  <div class="dy-fx-1">{{item.expensePeriod || '--'}}</div>
                  <div class="dy-fx-1">{{item.amount | formatNum}}</div>
                  <div class="dy-fx-1">{{Number(item.lateFee * 100).toFixed(2)}}%</div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 阶梯租金 -->
          <div v-if="rent.length">
            <h3 class="title">阶梯租金</h3>
            <p style="margin-bottom: 5px;"><span class="color-999">递增方式：</span>
              <span>{{contract.rentIncreaseWayValue ? contract.rentIncreaseWayValue : '下账期递增'}}</span></p>
            <div class="table border">
              <div class="tb-title dy-flex border-b gradient-color">
                <div class="dy-fx-2">阶梯开始时间</div>
                <div class="dy-fx-1">递增率</div>
                <div class="dy-fx-2">租金单价({{contract.rentPriceUnit == 'D'? '元/平米/天':'元/平米/月'}})</div>
                <div class="dy-fx-2">日租金(元/天)</div>
                <div class="dy-fx-2">月租金(元/月)</div>
                <div class="dy-fx-1" v-if="contract.rentDiscountRate">折扣率</div>
                <div class="dy-fx-2" v-if="contract.rentDiscountRate">折后日租金(元/天)</div>
                <div class="dy-fx-2" v-if="contract.rentDiscountRate">折后月租金(元/月)</div>
              </div>
              <ul class="tb-content">
                <li class="content-item dy-flex" v-for="(item,index) in rent">
                  <div class="dy-fx-2">{{item.beginDate}}</div>
                  <div class="dy-fx-1">{{Number(item.percent).toFixed(2)}}%</div>
                  <div class="dy-fx-2">{{item.price | formatNum}}</div>
                  <div class="dy-fx-2">{{item.dayPrice | formatNum}}</div>
                  <div class="dy-fx-2">{{item.monthPrice | formatNum}}</div>
                  <div class="dy-fx-1" v-if="contract.rentDiscountRate">{{(item.discount*100) | formatNum}}%</div>
                  <div class="dy-fx-2" v-if="contract.rentDiscountRate">{{item.discountD | formatNum}}</div>
                  <div class="dy-fx-2" v-if="contract.rentDiscountRate">{{item.discountM | formatNum}}</div>
                </li>
              </ul>
            </div>
          </div>

          <!-- 免租期 -->
          <div v-if="freeDate.length">
            <h3 class="title">免租期/装修期</h3>
            <div class="table border">
              <div class="tb-title dy-flex border-b gradient-color">
                <div class="dy-fx-2">序号</div>
                <div class="dy-fx-4">免租/装修开始时间</div>
                <div class="dy-fx-4">免租/装修结束时间</div>
                <div class="dy-fx-2">账单去除</div>
                <div class="dy-fx-2">备注</div>
              </div>
              <ul class="tb-content">
                <li class="content-item dy-flex" v-for="(item,index) in freeDate">
                  <div class="dy-fx-2">{{index+1}}</div>
                  <div class="dy-fx-4">{{item.freeBeginDate | formatDate}}</div>
                  <div class="dy-fx-4">{{item.freeEndDate | formatDate}}</div>
                  <div class="dy-fx-2">
                    <span v-show="index == 0">{{item.billHiddenFlag == 'Y' ? '是':'否' }}</span>
                    <span v-show="index > 0">{{ '--' }}</span>
                  </div>
                  <div class="dy-fx-2">{{item.freeMemo || '--' }}</div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 营业额抽成 -->
          <div v-if="contract.commissionRules.length">
            <h3 class="title">营业额抽成</h3>
            <p class="line-height-34">抽成方式: <span class="ml-10">{{ contract.commissionTypeVal }}</span> <span
                style="font-weight: normal;color: #E98667;font-size: 12px"
                v-if="contract.compareRentAmtFlag == 'Y'">(租金与抽成取其高)</span></p>
            <div class="table border">
              <div class="tb-title dy-flex gradient-color">
                <div class="dy-flex border-b dy-fx-8">
                  <div class="dy-fx-1">基数下限（＞元）</div>
                  <div class="dy-fx-1">基数上限（≤元）</div>
                  <div class="dy-fx-1">抽成比例（%）</div>
                  <div class="dy-fx-1">抽成下限（元）</div>
                  <div class="dy-fx-1">抽成上限（元）</div>
                  <div class="dy-fx-1">滞纳金比例（%）</div>
                  <div style="width:150px">付款日期</div>
                </div>
                <div class="dy-fx-1 text-center">付款周期（月）</div>
              </div>
              <div class="dy-flex">
                <ul class="tb-content dy-fx-8">
                  <li class="content-item dy-flex" v-for="(item,index) in contract.commissionRules">
                    <div class="dy-fx-1">{{ item.baseValDownLimit }}</div>
                    <div class="dy-fx-1">
                      <span v-if="index < contract.commissionRules.length-1">{{ item.baseValUpLimit }}</span>
                      <span v-if="index == contract.commissionRules.length-1">不限</span>
                    </div>
                    <div class="dy-fx-1">{{ item.commissonPercent}}</div>
                    <div class="dy-fx-1">{{ item.commissionDownLimit || '--' }}</div>
                    <div class="dy-fx-1">{{ item.commissionUpLimit || '--' }}</div>
                    <div class="dy-fx-1">{{ item.lateFeePercent || '--' }}</div>
                    <div style="width:150px">
                      {{contract.commissionDateBoa ? (contract.commissionDateBoa == 'B' ? '账单开始前' : '账单开始后') : '账单开始前'}}{{contract.commissionDateFixNum | formatUndefined}}{{contract.commissionDateFixType ? (contract.commissionDateFixType == 'TS' ? '个自然日' : '号') : '个自然日'}}
                    </div>
                  </li>
                </ul>
                <div class="dy-fx-1 text-center border-l"
                  :style="{height: contract.commissionRules.length*40 + 'px', lineHeight: contract.commissionRules.length*40 + 'px'}">
                  {{ contract.commissionPaymentPeriod }}</div>
              </div>
            </div>
          </div>
          <!-- 周期性费项 -->
          <div v-if="pExpense.length">
            <h3 class="title">周期性费项</h3>
            <div class="table border">
              <div class="tb-title dy-flex border-b gradient-color">
                <div class="dy-fx-2">费用名</div>
                <div class="dy-fx-2">单价</div>
                <div class="dy-fx-1">日金额(元/天)</div>
                <div class="dy-fx-1">月金额(元/月)</div>
                <div class="dy-fx-1">付款周期</div>
                <div class="dy-fx-1">滞纳金比例</div>
                <div class="dy-fx-2">计费时间</div>
              </div>
              <ul class="tb-content">
                <li class="content-item dy-flex" v-for="(item,index) in pExpense">
                  <div class="dy-fx-2">{{item.expenseName}}</div>
                  <div class="dy-fx-2 dy-flex" style="justify-content: space-between;"><span
                      class="pl-5">{{item.price | formatNum}}</span> <span class="pr-5">{{ item.unitsVal }}</span></div>
                  <div class="dy-fx-1">{{item.priceDay | formatNum}}</div>
                  <div class="dy-fx-1">{{item.priceMonth | formatNum}}</div>
                  <div class="dy-fx-1">{{item.expensePeriod}}</div>
                  <div class="dy-fx-1">{{Number(item.lateFee * 100).toFixed(2)}}%</div>
                  <div class="dy-fx-2">
                    <div v-if="item.customPeriod.length">
                      <p v-for="item1 in item.customPeriod">{{item1.beginDate | formatDate}} 至
                        {{item1.endDate | formatDate}}</p>
                    </div>
                    <div v-else>同租赁周期</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>

          <!-- 一次性费项 -->
          <div v-if="oExpense.length">
            <h3 class="title">一次性费项</h3>
            <div class="table border">
              <div class="tb-title dy-flex border-b gradient-color">
                <div class="dy-fx-1">费用名</div>
                <div class="dy-fx-1">单价(元/平米/天)</div>
                <div class="dy-fx-1">总金额</div>
                <div class="dy-fx-1">滞纳金比例</div>
              </div>
              <ul class="tb-content">
                <li class="content-item dy-flex" v-for="(item,index) in oExpense">
                  <div class="dy-fx-1">{{item.expenseName}}</div>
                  <div class="dy-fx-1">{{item.price | formatNum}}</div>
                  <div class="dy-fx-1">{{item.amount | formatNum}}</div>
                  <div class="dy-fx-1">{{Number(item.lateFee * 100).toFixed(2)}}%</div>
                </li>
              </ul>
            </div>
          </div>

          <!-- 临时性费项 -->
          <div v-if="tExpense.length">
            <h3 class="title">临时费项</h3>
            <div class="table border">
              <div class="tb-title dy-flex border-b gradient-color">
                <div class="dy-fx-1">费用名</div>
                <div class="dy-fx-3">金额</div>
                <div class="dy-fx-3">税率(%)</div>
              </div>
              <ul class="tb-content">
                <li class="content-item dy-flex" v-for="(item,index) in tExpense">
                  <div class="dy-fx-1">{{item.expenseName}}</div>
                  <div class="dy-fx-3">{{item.amount | formatNum}}</div>
                  <div class="dy-fx-3">{{item.taxPercent*100}}</div>
                </li>
              </ul>
            </div>
          </div>

          <div v-if="contractType == 'contractEnd'">
            <h3 class="title">终止原因</h3>
            <div class=" js-rent-method">
              <span class="hl-radio" :class="{active:selectTerminationReasonCode == item.dictCode}"
                v-for="item in terminationReasonList" style="margin-right:30px"
                @click="selectTerminationReason(item.dictCode)">{{item.dictName}}</span>
            </div>
            <h3 class="title">终止说明</h3>
            <textarea name="" id="" v-model="TerminationReasonIns"></textarea>
          </div>
          <div class="pt-10">
            <!--合同为草稿或者审核拒绝状态时能够编辑、作废、提交合同-->
            <hl-button type="primary" @on-click="checkClose" v-if="contractType == 'contractEnd'">确定</hl-button>
            <!-- ( permissions.indexOf('c121') > -1 && contract.auditState == 'PA' ) || ( permissions.indexOf('c121') > -1 && contract.auditState == 'EX' ) -->


            <!-- (permissions.indexOf('c200') > -1 && contract.auditState == 'FN') || (permissions.indexOf('c200') > -1 && contract.auditState == 'EX') || (permissions.indexOf('c200') > -1 && contract.auditState == 'EN') -->


            <hl-button type="primary" @on-click="editContract"
              v-show=" (permissions.indexOf('c33') > -1 && contract.auditState == 'RJ') || (permissions.indexOf('c33') > -1 && contract.auditState == 'CG') ">
              编辑</hl-button>
            <hl-button type="primary" @on-click="previewTemPrint"
              v-show=" ( selectedTabItem == '合同信息' && permissions.indexOf('c199') > -1 && contractType != 'contractEnd' ) "
              size="large">合同预览/导出</hl-button>
            <hl-button type="primary" @on-click="submitContract"
              v-show=" (contract.auditState == 'RJ' || contract.auditState == 'CG') ">提交</hl-button>
            <hl-button type="primary" @on-click="invalidContract"
              v-show=" (permissions.indexOf('c34') > -1 && contract.auditState == 'RJ') ">作废</hl-button>
            <hl-button type="primary" @on-click="invalidContract"
              v-show=" (permissions.indexOf('c34') > -1 && contract.auditState == 'CG') ">作废</hl-button>
            <hl-button type="primary" @on-click="updateContract" v-if="contractType != 'contractEnd'"
              v-show="permissions.indexOf('c121') > -1 && ['FN','EX'].indexOf(contract.auditState) > -1">变更</hl-button>
            <hl-button type="primary" @on-click="createRelet"
              v-show="permissions.indexOf('c200') > -1 && ['TE', 'EN', 'EX', 'FN'].indexOf(contract.auditState) > -1">
              续租</hl-button>
            <hl-button type="primary" @on-click="checkWithout"
              v-if="permissions.indexOf('c53') > -1 && ['PA', 'EX', 'FN'].indexOf(contract.auditState) > -1">退租
            </hl-button>
            <hl-button type="primary" @on-click="delContract" v-show=" contract.auditState == 'GC' ">删除</hl-button>
          </div>
        </section>
        <!-- 账单信息 -->
        <div class="js-bill pb-10 mt-15" v-if="loadBillMesModule">
          <div class="clearfix pb-10">
            <hl-button size="mini" class="pull-right js-execl-export-btn" v-if="permissions.indexOf('c79') > -1"
              @on-click="exportBill">导出</hl-button>
          </div>
          <a :href="billUrl" id="billLink" @click="confirmExportBill"></a>

          <div v-if="!alterId">
            <bill-change :params="billParams" :skip-to="true"></bill-change>
          </div>
          <div v-if="alterId">
            <bill-change url="history_contract/bills" :params="oldBillParams" :skip-to="false"></bill-change>
          </div>

          <div class="mt-15 pt-10" v-if="showCreateBill && !alterId">
            <hl-button type="outline" @on-click="createBill" v-if="permissions.indexOf('c173') > -1">新建账单</hl-button>
          </div>
        </div>
        <!-- 凭证列表 -->
        <div v-show="loadVoucherModule">
          <div class="font-16 mt-15">凭证列表</div>
          <div class="account-wrap border-r br-4 box-i-shadow overflow  mt-10">
            <div class="list-head dy-flex">
              <div class="dy-fx-1">序</div>
              <div class="dy-fx-1">会计年</div>
              <div class="dy-fx-1">会计期间</div>
              <div class="dy-fx-2">凭证日期</div>
              <div class="dy-fx-2">制单日期</div>
              <div class="dy-fx-1">凭证类别</div>
              <div class="dy-fx-1">制单人</div>
              <div class="dy-fx-1">科目编码</div>
              <div class="dy-fx-3">摘要</div>
              <div class="dy-fx-1">操作</div>
            </div>
            <div class="content_box">
              <div class="list-head br-t-n dy-flex textCenter" v-for="(item,index) in voucherList">
                <div class="dy-fx-1">{{index+1}}</div>
                <div class="dy-fx-1">{{item.voucherYear}}</div>
                <div class="dy-fx-1">{{item.voucherPeriod}}</div>
                <div class="dy-fx-2">{{item.voucherDate | formatDate}}</div>
                <div class="dy-fx-2">{{item.documentingDate | formatDate}}</div>
                <div class="dy-fx-1">{{item.voucherTypeVal || '--'}}</div>
                <div class="dy-fx-1">{{item.documentingUserName}}</div>
                <div class="dy-fx-1 fx-wrap">
                  <div class="width-max text-center" :class="{'border-t':index0 > 0}"
                    v-for="(item0,index0) in item.debtorANDLenderVOs">{{item0.subjectVal || '--'}}</div>
                </div>
                <div class="dy-fx-3 fx-wrap ellipsis-1">
                  <div style="padding:0 5px" class="width-max text-center ellipsis-1" :class="{'border-t':index0 > 0}"
                    v-for="(item0,index0) in item.debtorANDLenderVOs" :title="item0.summaryValue">
                    {{item0.summaryValue || '--'}}</div>
                </div>
                <div class="dy-fx-1"><a @click="goToDetail(item.id,item)">详情</a></div>
              </div>
            </div>
          </div>
        </div>
        <!-- 相关文件 -->
        <div class="contract-file-container mt-15" v-show="loadFileMesModule">
          <div class="upload-head-contract clearfix border-b pb-10">
            <div class="pull-left font-16 line-height-34">文件列表</div>
            <hl-button class="pull-right upload-file" @on-click="uploadFile"
              v-if="contract.auditState != 'GC' && contract.auditState != 'TE' && contract.auditState != 'EN' && permissions.indexOf('c92') != -1">
              上传文件</hl-button>
          </div>
          <ul>
            <li class="clearfix border-b" v-for="(item,index) in contractFile">
              <p class="icon-Nav-contract-file file-name">
                <span>{{item.name}}</span>
              </p>
              <p class="pull-right line-height-45 file-btn dy-flex opera-but" style="align-items: center;height: 45px">
                <a class="icon-Gm-delete opera-but-first mr-10"
                  v-if="permissions.indexOf('c126') > -1 && (contract.auditState == 'CG' || contract.auditState == 'RJ')"
                  v-show="!(permissions.indexOf('c91') > -1)" @click="deleteFile(item.url,index)">
                  <b>删除</b>
                </a>
                <a class="icon-Gm-delete opera-but-first mr-10" v-if="permissions.indexOf('c91') > -1"
                  @click="deleteFile(item.url,index)">
                  <b>删除</b>
                </a>
                <span class="block-D-P-D"
                  v-if="permissions.indexOf('c126') > -1 && (contract.auditState == 'CG' || contract.auditState == 'RJ')"
                  v-show="!(permissions.indexOf('91') > -1)"></span>
                <span class="block-D-P-D" v-if="permissions.indexOf('91') > -1 "></span>
                <a class="icon-GM-preview" @click="previewImage(item.url)">
                  <b>预览</b>
                </a>
                <span class="block-D-P-D"></span>
                <a :href="item.url" :download="item.name" class="icon-Gm-download">
                  <b>下载</b>
                </a>
              </p>
            </li>
          </ul>
        </div>
        <!-- 收入确认 -->
        <section v-show="loadIncomeModule">
          <div class="font-16 mt-15">收入确认表</div>

          <div class="clearfix table-income mb-20 mt-10">
            <div style="overflow-x: scroll;">
              <table border="0" class="br-4 box-i-shadow overflow" style="min-width: 100%;">
                <tr class="line-height-40 text-center">
                  <th class="color-gray" style="white-space: nowrap;width: 100px;">年份/月</th>
                  <th class="border-l color-gray dy-flex" style="padding: 0!important;">
                    <div class="plr-12" style="width: 110px;">费项</div>
                    <div class="border-l plr-12 color-gray" style="width: 130px;" v-for="item in monthArr">{{ item }}月
                    </div>
                  </th>
                </tr>
                <tr class="line-height-40 text-center" :class="{'border-t': index == 0 }"
                  v-for="(item, index) in contractIncomeData.year" v-if="contractIncomeData.revenueRecognitions.length">
                  <td class="border-b">{{ item }}</td>
                  <th class="border-l" style="padding: 0!important;">
                    <div class="dy-flex border-b" v-for="item0 in contractIncomeData.revenueRecognitions">
                      <div class="plr-12" style="width: 110px;">{{ item0.expenseName }}</div>
                      <div class="border-l" style="width: 130px;" v-for="item1 in item0.amounts"
                        v-if="item1.month.indexOf(item) > -1">
                        <span
                          :class="{'scal-font': item1.withdrawAmount && item1.withdrawAmount != '0.00', 'scal-font1': item1.withdrawAmount && item1.withdrawAmount == '0.00'}">{{ item1.amount || '--' }}</span>
                        <span style="margin-left: 8px;"
                          v-if="item1.withdrawAmount && item1.withdrawAmount != '0.00'">{{ item1.withdrawAmount }}</span>
                      </div>
                    </div>
                  </th>
                </tr>
              </table>
            </div>
          </div>
          <hl-button type="default" @on-click="exportContrat">导出</hl-button>
        </section>
        <!-- 历史版本 -->
        <div style="margin-top:40px;" v-show="loadHistoryModule">
          <div class="bg-white box-i-shadow border box-o-shadow" v-if="history.length">
            <div class="text-center dy-flex color-999 gradient-color">
              <div class="dy-fx-1 line-height-45 ellipsis-1">版本号</div>
              <div class="dy-fx-4 line-height-45 ellipsis-1">租约期</div>
              <div class="dy-fx-1 line-height-45 ellipsis-1">操作</div>
            </div>
            <div class="text-center">
              <div class="clearfix border-t dy-flex" v-for="(item,index) in history">
                <div class="dy-fx-1 line-height-45 ellipsis-1 border-r">{{item.version}}</div>
                <div class="dy-fx-4 line-height-45 ellipsis-1 border-r">{{item.durationFrom | formatDetailDate}} 至
                  {{item.durationTo | formatDetailDate}}</div>
                <div class="dy-fx-1 line-height-45 ellipsis-1"><a @click="historyContract(item)">查看</a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 合同打印、预览 -->
      <div class=" pop box-o-shadow contract-confirm-layer" v-if="loadContractMesModule">
        <div class="templateList" v-if="TemplateModulShow == true">
          <div class="templateList_title">
            合同导出
            <span class="icon-Gm-close TC_close_icon" @click="TemplateModulShow = false"></span>
          </div>
          <div class="templateList_content">
            <div class="TC_header ">
              <div>
                <span>选择导出文件类型：<span style="color:#ccc"> (可多选)</span></span>
                <hl-button @on-click="addNewTem">新建模板</hl-button>
              </div>
              <ul class="">
                <li v-for="(item,index) in TemTypeList">
                  <span :class="selectedTemTypeList.indexOf(item) >= 0 ? 'check-auth-active':'check-auth'"
                    @click="selectedTemType(item)"></span>
                  <span>{{item}}文档</span>
                </li>
              </ul>
            </div>
            <div class="TC_body">
              <div><span>选择导出模板：<span style="color:#ccc"> (请选择一个模板）</span></span>
              </div>
              <div class="tem-item-box">
                <ul class="tem-item" v-for="(item,index) in temList">
                  <li class="TC_mask" @click="preview(item.id)">预览</li>
                  <li class="TC_text  ellipsis-1">{{item.templateName}}</li>
                  <span class="check-item"></span>
                  <span class="icon-right-nav-Selected  TC_selected_icon"
                    :class="selectedTemList == item.id ? 'TC_selected_active':''" @click="selectedTem(item)"></span>
                </ul>
              </div>
            </div>

          </div>
          <div class="templateList_footer">
            <hl-button type="primary" @on-click="exportTemplate">导出</hl-button>
            <hl-button type="outline" @on-click="TemplateModulShow = false">取消</hl-button>
          </div>
        </div>

      </div>
      <!--遮罩-->
      <div class="hllayer-mask" v-show="TemplateModulShow"></div>
      <!--提交确认弹出层-->
      <div class="pop box-o-shadow contract-confirm-layer" v-show="isShowSubmitLayer">
        <div class="head-pop font-16"><span>提交审核</span>
          <button class="fw-close absolute close" type="button" @click="closeSubmitLayer">×</button>
        </div>
        <div class="content-pop">
          <div class="content">是否确定提交<span>
              <{{contract.zlfCompany}}>
            </span><span class="color-orange">{{contract.beginDate | formatDate}} 至 {{contract.endDate | formatDate}}
            </span></span>的合同审核？</div>
        </div>
        <div class="fw-button">
          <hl-button type="primary" @on-click="confirmSubmitContract">确定提交</hl-button>
          <hl-button type="outline" @on-click="closeSubmitLayer">返回修改</hl-button>
        </div>
      </div>
      <!--遮罩-->
      <div class="hllayer-mask" v-show="isShowSubmitLayer"></div>

      <div class="del-contract-fixed hide" v-if="delFlag">
        <div class="del-contract">
          <p>删除后不可恢复，是否确认删除？</p>
          <div class="del-btn">
            <button @click="delContract">确认删除</button>
            <button @click="delFlag = !delFlag">取消删除</button>
          </div>
        </div>
      </div>
      <div class="upload-filess"></div>
      <!-- 单元详情 -->
      <unit-details :unit-id="unitId" :unit-details-flag="unitDetailsFlag" @close="closeUnitPop"></unit-details>

    </div>
    <div class="loadprogress" v-if="progress">正在上传({{progress}})...</div>
</section>

<script src="modules/rent/scripts/unit_details.js" charset="utf-8"></script>
<script src="modules/contratchange/scripts/bill_change.js" type="text/javascript" charset="utf-8"></script>
<script src="modules/contract/scripts/contract_detail1.js" charset="utf-8"></script>
<script src="modules/contract/scripts/contract_public.js" charset="utf-8"></script>
